<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>美团</title>
    <script src="../Vue/vue.js"></script>
    <script src="../Vue/vue-router.js"></script>
    <script src="mtbase.js"></script>
    <link rel="stylesheet" href="mtindex.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<div id="mtapp">
    <router-view></router-view>
</div>
<template id="main">
    <div>
        <div class="top">
            <div class="top1">
                <span>厦门</span>
                <i class="fa fa-angle-down"></i>
            </div>
            <div class="top2">
                <i class="fa fa-search"></i><span>输入商家/品类/商圈</span>
            </div>
            <div class="top3" @click="user">
                <i class="fa fa-user-o"></i>
                <div>我的</div>
            </div>
        </div>
        <div class="centent">
            <div class="centent1">
                <img src="mtimg/美团1.png">
            </div>
            <div class="centent2">
                <router-view></router-view>
                <ul class="centent22">
                    <span :class="{sp:change}" @click="nav1" class="sp1"></span>
                    <span :class="{sp:!change}" @click="nav2" class="sp2"></span>
                </ul>
            </div>
            <div class="centent3">
                <div class="centent31">猜你喜欢</div>
                <div class="centent32" v-for="item in menu" :key="item.id">
                    <div class="centent32left" :style="{'background-image':item.bgi}"></div>
                    <div class="centent32right">
                        <div>{{item.name1}}</div>
                        <div>{{item.name2}}</div>
                        <div class="price">
                            <span>{{item.price1}}</span>
                            <span>{{item.price2}}</span>
                            <span>{{item.price3}}</span>
                            <span>{{item.price4}}</span>
                        </div>
                    </div>
                </div>
                <div class="centent33">
                    <span>查看全部团购</span><span> > </span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom1">
                <span>登录</span>
                <span>注册</span>
                <span>厦门</span>
                <span>城市:</span>
            </div>
            <div class="bottom2">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">我的</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">美团下载</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">电脑版</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">帮助</a></li>
                </ul>
            </div>
            <div class="bottom3">
                <a href="#">友情链接：</a><a href="#">猫眼电影</a><a href="#">大众点评</a><a href="#">美团旅行</a>
                <a href="#">榛果民宿</a><a href="#">大众点评下载</a><a href="#">美团收银官网</a>
                <a href="#">美团点评餐饮学院</a><a href="#">快驴进货商家合作</a>
            </div>
            <div class="bottom4">
                <fieldset>
                    <legend><span>©2019 美团网 </span><a href="#" class="lea">京ICP证070791号</a></legend>
                </fieldset>
            </div>
        </div>
    </div>
</template>
<template id="nav1">
    <div>
        <ul class="centent21">
            <li v-for="(item,index) in lis1" :key="item.id" @click="foods(index)">
                <div :class="item.class" :style="{'background-color':item.bgc}"></div>
                <div>{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>
<template id="nav2">
    <div>
        <ul class="centent21">
            <li v-for="(item,index) in lis2" :key="item.id">
                <div :class="item.class" :style="{'background-color':item.bgc}"></div>
                <div>{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>
<template id="food">
    <div class="foods">
        <div class="heads">
            <div @click="foodback"><</div>
            <div>
                <span class="fa fa-search"></span>
                <span>输入商家名、品类或商圈</span>
            </div>
            <div class="fa fa-user-o"></div>
        </div>
        <div class="content">
            <div class="bods">
                <div class="bods1">
                    <img src="mtimg/美团1.png">
                </div>
                <div class="bods2">
                    <ul>
                        <li v-for="(item,index) in foodlist" :key="item.id">
                            <div><img :src="item.src"></div>
                            <div>{{item.name}}</div>
                        </li>
                    </ul>
                </div>
                <div class="bods3">
                    <div class="bods31">
                        <span>全部美食&nbsp▼</span>
                        <span>附近商家&nbsp▼</span>
                        <span>智能排序&nbsp▼</span>
                        <span>筛选&nbsp▼</span>
                    </div>
                    <div class="bods32">
                        <div class="bods32top">
                            <div class="bods32left"><img src="mtimg/蒸汽海鲜.jpg"></div>
                            <div class="bods32right">
                                <div class="rights1">
                                    90海里自助蒸汽海鲜（集源店）
                                </div>
                                <div class="rights2">
                                    <span>★★★★</span>
                                    <span>￥64/人</span>
                                    <span>1.2km</span>
                                    <span>石鼓路/集美学村</span>
                                </div>
                                <div class="rights3">
                                    <span>海鲜自助</span>
                                    <span>石鼓路/集美学村海鲜第1名</span>
                                    <span>小龙虾赞</span>
                                </div>
                            </div>
                        </div>
                        <div class="bods32bottom">
                            <div class="bods32bottom1">
                                <span><img src="mtimg/美团商标.png"></span>
                                <span>单人午餐86元起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="foots">
                <div class="foots1">
                    <span>当前位置:</span>
                    <span>厦门团购</span>
                    <span>></span>
                    <span>全部团购</span>
                </div>
                <div class="foots2 bottom1">
                    <span>登录</span>
                    <span>注册</span>
                    <span>厦门</span>
                    <span>城市:</span>
                </div>
                <div class="foots3 bottom2">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><span>|</span></li>
                        <li><a href="#">我的</a></li>
                        <li><span>|</span></li>
                        <li><a href="#">美团下载</a></li>
                        <li><span>|</span></li>
                        <li><a href="#">电脑版</a></li>
                        <li><span>|</span></li>
                        <li><a href="#">帮助</a></li>
                    </ul>
                </div>
                <div class="foots4">
                    友情链接：<a href="#">猫眼电影</a>
                </div>
                <div class="foots5 bottom4">
                    <fieldset>
                        <legend><span>©2019 美团网 </span><a href="#" class="lea">京ICP证070791号</a></legend>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</template>
<template id="user">
    <div>
        <div class="utop">
            <div @click="userback"><</div>
            <div>我的美团</div>
            <div class="utop3">
                <span class="fa fa-home"></span>
                <i>首页</i>
            </div>
            <div class="utop4">
                <span class="fa fa-search"></span>
                <i>搜索</i>
            </div>
        </div>
        <div class="ucentent">
            <div class="ucent1">
                <div class="ucleft">
                    <img src="mtimg/space.png">
                </div>
                <div class="ucmid">
                    <div>CGM</div>
                    <div>账户余额：<i>0</i>元</div>
                </div>
                <div class="ucright"> ></div>
            </div>
            <div class="ucent2">
                <span class="fa fa-newspaper-o"></span>
                <span>全部订单</span>
                <span> > </span>
            </div>
            <div class="ucent3">
                <div class="ucent3d" @click="pays">
                    <span class="fa fa-y-combinator"></span>
                    <div>待付款</div>
                </div>
                <div class="ucent3d">
                    <span class="fa fa-y-combinator"></span>
                    <div>待使用</div>
                </div>
                <div class="ucent3d">
                    <span class="fa fa-y-combinator"></span>
                    <div>待评价</div>
                </div>
                <div class="ucent3d">
                    <span class="fa fa-y-combinator"></span>
                    <div>退款/售后</div>
                </div>
            </div>
            <div class="ucent4">
                <ul>
                    <li v-for="(item,index) in ulist">
                        <span :class="item.class"></span>
                        <span>{{item.name}}</span>
                        <span> > </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom1">
                <span>登录</span>
                <span>注册</span>
                <span>厦门</span>
                <span>城市:</span>
            </div>
            <div class="bottom2">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">我的</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">美团下载</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">电脑版</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">帮助</a></li>
                </ul>
            </div>
            <div class="bottom3">
                <a href="#">友情链接：</a><a href="#">猫眼电影</a><a href="#">大众点评</a><a href="#">美团旅行</a>
                <a href="#">榛果民宿</a><a href="#">大众点评下载</a><a href="#">美团收银官网</a>
                <a href="#">美团点评餐饮学院</a><a href="#">快驴进货商家合作</a>
            </div>
            <div class="bottom4">
                <fieldset>
                    <legend><span>©2019 美团网 </span><a href="#" class="lea">京ICP证070791号</a></legend>
                </fieldset>
            </div>
        </div>
    </div>
</template>
<template id="pay">
    <div>
        <div class="paytop">
            <span> < </span>
            <span>全部订单▼</span>
            <span>导航</span>
        </div>
        <div class="paycontent">
            <div class="paycontent1">
                <ul>
                    <li v-for="(item,index) in paylist" :class="{paycheck:item.col}" @click="pays(index)">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
        <div class="paybottom"></div>
    </div>
</template>
<template id="pay1">
    <div class="pay1">
        <ul>
            <li v-for="(item,index) in pay1list">
                <div :style="{'background-image':item.bgi}"></div>
                <div></div>
                <div></div>
            </li>
        </ul>
    </div>
</template>
<script>
    var nav1 = Vue.extend({
        template: "#nav1",
        data() {
            return {
                lis1: [
                    {
                        id: 1,
                        class: "fa fa-renren",
                        bgc: "#fd9d21",
                        name: "美食"
                    },
                    {
                        id: 2,
                        class: "fa fa-renren",
                        bgc: "#ff6767",
                        name: "猫眼电影"
                    },
                    {
                        id: 3,
                        class: "fa fa-renren",
                        bgc: "#8a90fa",
                        name: "酒店"
                    },
                    {
                        id: 4,
                        class: "fa fa-renren",
                        bgc: "#fed030",
                        name: "休闲娱乐"
                    },
                    {
                        id: 5,
                        class: "fa fa-renren",
                        bgc: "#fd9d21",
                        name: "外卖"
                    },
                    {
                        id: 6,
                        class: "fa fa-renren",
                        bgc: "#fed030",
                        name: "KTV"
                    },
                    {
                        id: 7,
                        class: "fa fa-renren",
                        bgc: "#4dc6ee",
                        name: "周边游"
                    },
                    {
                        id: 8,
                        class: "fa fa-renren",
                        bgc: "#ff80c2",
                        name: "丽人"
                    },
                    {
                        id: 9,
                        class: "fa fa-renren",
                        bgc: "#fd9d21",
                        name: "小吃快餐"
                    },
                    {
                        id: 10,
                        class: "fa fa-renren",
                        bgc: "#A8DD99",
                        name: "生活服务"
                    },
                ],

            }
        },
        methods: {
            foods(index) {
                switch (index) {
                    case 0:
                        this.$router.push({name: "food"});
                }
            }
        }
    });
    var nav2 = Vue.extend({
        template: "#nav2",
        data() {
            return {
                lis2: [
                    {
                        id: 1,
                        class: "fa fa-renren",
                        bgc: "#fd9d21",
                        name: "今日新单"
                    },
                    {
                        id: 2,
                        class: "fa fa-renren",
                        bgc: "#ff6767",
                        name: "足疗/按摩"
                    },
                    {
                        id: 3,
                        class: "fa fa-renren",
                        bgc: "#8a90fa",
                        name: "甜点饮品"
                    },
                    {
                        id: 4,
                        class: "fa fa-renren",
                        bgc: "#fed030",
                        name: "婚摄摄影"
                    },
                    {
                        id: 5,
                        class: "fa fa-renren",
                        bgc: "#fd9d21",
                        name: "母婴亲子"
                    },
                    {
                        id: 6,
                        class: "fa fa-renren",
                        bgc: "#fed030",
                        name: "学习培训"
                    },
                    {
                        id: 7,
                        class: "fa fa-renren",
                        bgc: "#4dc6ee",
                        name: "结婚"
                    },
                    {
                        id: 8,
                        class: "fa fa-renren",
                        bgc: "#ff80c2",
                        name: "家装"
                    },
                    {
                        id: 9,
                        class: "fa fa-renren",
                        bgc: "#fd9d21",
                        name: "代金券"
                    },
                    {
                        id: 10,
                        class: "fa fa-renren",
                        bgc: "#A8DD99",
                        name: "全部分类"
                    },
                ],

            }
        }
    });
    var main = Vue.extend({
        template: "#main",
        data() {
            return {
                change: true,
                menu: [
                    {
                        id: 1,
                        bgi: "url('mtimg/小郡肝.jpg')",
                        name1: "钢管厂五区小郡肝串串香",
                        name2: "[火车站]100元代金券1张，可叠加2张",
                        price1: "69",
                        price2: "元",
                        price3: "门市价:100元",
                        price4: "已售7736",
                    },
                    {
                        id: 2,
                        bgi: "url('mtimg/自助餐.jpg')",
                        name1: "海上花园酒店·自助午餐厅",
                        name2: "[厦门等]单人自助午餐",
                        price1: "53",
                        price2: "元",
                        price3: "门市价:68元",
                        price4: "已售17749",
                    },
                    {
                        id: 3,
                        bgi: "url('mtimg/贵族世家.jpg')",
                        name1: "贵族世家牛排",
                        name2: "[厦门等]香嫩黑椒牛排（全新上市）1份",
                        price1: "49",
                        price2: "元",
                        price3: "门市价:83元",
                        price4: "已售182733",
                    },
                    {
                        id: 4,
                        bgi: "url('mtimg/一小子.jpg')",
                        name1: "一小子·排骨咸饭",
                        name2: "[厦门等]超值1人餐，提供免费WiFi",
                        price1: "19.8",
                        price2: "元",
                        price3: "门市价:29元",
                        price4: "已售467",
                    },
                    {
                        id: 5,
                        bgi: "url('mtimg/大酒楼.jpg')",
                        name1: "厦航海鲜大酒楼",
                        name2: "[莲花]广式自助茶点/广式自助茶点2选1",
                        price1: "75",
                        price2: "元",
                        price3: "门市价:168元",
                        price4: "已售23668",
                    },
                    {
                        id: 6,
                        bgi: "url('mtimg/美人鱼自助.jpg')",
                        name1: "荣誉·梵尔纳美人鱼自助餐厅",
                        name2: "[环岛路黄厝海滨浴场]单人自助午餐",
                        price1: "155",
                        price2: "元",
                        price3: "门市价:258元",
                        price4: "已售60043",
                    },
                    {
                        id: 7,
                        bgi: "url('mtimg/万佳自助.jpg')",
                        name1: "[蔡塘广场]单人豪华自助晚餐",
                        name2: "[厦门等]香嫩黑椒牛排（全新上市）1份",
                        price1: "118",
                        price2: "元",
                        price3: "门市价:198元",
                        price4: "已售13390",
                    },
                    {
                        id: 8,
                        bgi: "url('mtimg/旺巴蜀.jpg')",
                        name1: "旺巴蜀小郡肝火锅串串香",
                        name2: "[塘边]100元开业限量代金券1张",
                        price1: "68",
                        price2: "元",
                        price3: "门市价:100元",
                        price4: "已售2514",
                    },
                    {
                        id: 9,
                        bgi: "url('mtimg/舒友.jpg')",
                        name1: "舒友海鲜姿造",
                        name2: "[白鹭洲公园]单人自助午餐",
                        price1: "288",
                        price2: "元",
                        price3: "门市价:318元",
                        price4: "已售6597",
                    },
                    {
                        id: 10,
                        bgi: "url('mtimg/牛太郎烤肉.jpg')",
                        name1: "牛太郎自助烤肉",
                        name2: "[厦门等]全天单人自助烤肉",
                        price1: "75.9",
                        price2: "元",
                        price3: "门市价:79元",
                        price4: "已售243381",
                    },
                    {
                        id: 11,
                        bgi: "url('mtimg/肉蟹煲.jpg')",
                        name1: "肉蟹煲",
                        name2: "[万达广场]2人餐，提供免费WiFi",
                        price1: "118",
                        price2: "元",
                        price3: "门市价:141元",
                        price4: "已售9348",
                    },
                    {
                        id: 12,
                        bgi: "url('mtimg/旺巴蜀.jpg')",
                        name1: "7美味",
                        name2: "[厦门等]烧肉饭套餐，建议单人使用",
                        price1: "10",
                        price2: "元",
                        price3: "门市价:16元",
                        price4: "已售22",
                    },

                ]
            }
        },
        methods: {
            nav1() {
                if (!this.change) {
                    this.change = true;
                }
                ;
                this.$router.push({name: "nav1"});
            },
            nav2() {
                if (this.change) {
                    this.change = false;
                }
                ;
                this.$router.push({name: "nav2"});
            },
            user() {
                this.$router.push({name: "users"});
            }
        }

    });
    var food = Vue.extend({
        template: "#food",
        data() {
            return {
                foodlist: [
                    {
                        id: 1,
                        src: "mtimg/火锅.png",
                        name: "火锅",
                    },
                    {
                        id: 2,
                        src: "mtimg/甜点饮品.png",
                        name: "甜点饮品",
                    },
                    {
                        id: 3,
                        src: "mtimg/自助餐图片.png",
                        name: "自助餐",
                    },
                    {
                        id: 4,
                        src: "mtimg/小吃快餐.png",
                        name: "小吃快餐",
                    },
                    {
                        id: 5,
                        src: "mtimg/西餐.png",
                        name: "西餐",
                    },
                    {
                        id: 6,
                        src: "mtimg/烧烤烤肉.png",
                        name: "烧烤烤肉",
                    },
                    {
                        id: 7,
                        src: "mtimg/香锅烤鱼.png",
                        name: "香锅烤鱼",
                    },
                    {
                        id: 8,
                        src: "mtimg/海鲜.png",
                        name: "海鲜",
                    },
                ]
            }
        },
        mounted() {
            this.configure();
        },
        methods: {
            configure() {
                //设置body的高度等于window高度
                var heights = window.innerHeight;
                document.body.style.height = heights + "px";
                //2. 设置content块等于body的高度减去一头一尾的高度
                var content_height = 0;
                content_height = heights - 45;
                var contentDom = document.querySelector(".content");
                contentDom.style.height = content_height + "px";
            },
            foodback() {
                this.$router.push({name: "mains"});
            }
        }

    });
    var user = Vue.extend({
        template: "#user",
        data() {
            return {
                ulist: [
                    {
                        class: "fa fa-database",
                        name: "我的收藏",
                    },
                    {
                        class: "fa fa-database",
                        name: "我的抵用券",
                    },
                    {
                        class: "fa fa-database",
                        name: "我的抽奖单",
                    },
                    {
                        class: "fa fa-database",
                        name: "积分换礼品",
                    },
                ]
            }
        },
        methods: {
            userback() {
                this.$router.push({name: "mains"});
            },
            pays() {
                this.$router.push({name: "pays"});
            }
        }
    });
    var pay = Vue.extend({
        template: "#pay",
        data() {
            return {
                paylist: [
                    {name: "全部", col: true},
                    {name: "待付款", col: false},
                    {name: "待使用", col: false},
                    {name: "待评价", col: false},
                    {name: "退款/售后", col: false},
                ]
            }
        },
        methods: {
            pays(index) {
                for (var i = 0; i < this.paylist.length; i++) {
                    if (i == index) {
                        this.paylist[i].col = true;
                    }
                    else {
                        this.paylist[i].col = false;
                    }
                }
            }
        }

    });
    var router = new VueRouter({
        routes: [
            {path: '/', redirect: '/main'},
            {
                path: "/main", component: main, name: "mains",
                redirect: "/main/nav1",
                children: [
                    {path: "nav1", component: nav1, name: "nav1"},
                    {path: "nav2", component: nav2, name: "nav2"}
                ]
            },
            {path: "/food", component: food, name: "food"},
            {path: "/user", component: user, name: "users"},
            {path: "/pay", component: pay, name: "pays"}
        ]
    });
    var vue = new Vue({
        el: "#mtapp",
        router,
        data: {},
        methods: {}
    });
</script>
</body>
</html>